<template>
  <div class="team-box">
    <!--搜索-->
    <div class="search-body">
      <div class="input-box">
        <img src="../../assets/images/search-ico.png" alt=""/>
        <router-link to="">
          <input type="text" placeholder="请输入产品名"/>
        </router-link>
      </div>
      <!--<router-link to="/myDetailed">-->
      <!--<div class="title_div"><img src="../../assets/images/title.png" alt=""></div>-->
      <!--</router-link>-->

        <div class="title_div"><img src="../../assets/images/title.png" alt=""></div>

    </div>
    <div v-if="inventory.length==0">
      暂无库存
    </div>
    <div class="content">
      <div class="vip-list" v-for="(item,index) in inventory">
        <div class="fl-flex">
          <div class="fl-left">
            <img :src="sourceUrl+item.goods.goodsImg" alt="">
          </div>
          <div class="fl-right">
            <p>{{item.goods.goodsName}}</p>
            <div class="discribe">
               <br/><br/><!--黑加仑樱桃等新鲜水果香气精致的单宁加上木桶的醇香让人回味无穷-->
            </div>
            <div class="summary">
              <span>当前库存：<span class="gender">{{item.inventory}}</span></span>
              <!--<span>本月已出库：<span class="gender">{{item.sell}}</span></span>-->
            </div>
          </div>
        </div>
      </div>
      <!--<div class="vip-list" v-for="(item,index) in inventory">-->
        <!--<div class="fl-flex">-->
          <!--<div class="fl-left">-->
            <!--<img src="../../assets/images/p-1.png" alt="">-->
          <!--</div>-->
          <!--<div class="fl-right">-->
            <!--<p>法国波尔多AOC银奖干红大商股份是德国650ml</p>-->
            <!--<div class="discribe">-->
              <!--黑加仑樱桃等新鲜水果香气精致的单宁加上木桶的醇香让人回味无穷-->
            <!--</div>-->
            <!--<div class="summary">-->
              <!--<span>当前库存：<span class="gender">10</span></span>-->
              <!--<span>本月已出库：<span class="gender">8</span></span>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->

    </div>
    <div class="jh">
      <router-link to="Purchase">
        <p class="rep">
          <img src="../../assets/images/bh.png" alt="">
          进货
        </p>
      </router-link>
    </div>
  </div>
</template>

<script>
  import global from "../public/global.vue"
  export default {
    name: "my-stock",
    data(){
      return{
        inventory:[],//库存列表
        sourceUrl:global.sourceUrl
      }
    },
    methods:{
      inventoryList(){
        this.$http.get(global.apiUrl+"/agentInventory/inventoryList")
          .then(res=>{
            if(res.data.code==0){
              this.inventory = res.data.data
            }
          }).catch(function(err){
          console.error(err)
        })
      },
    },
    created: function () {
      document.title = "我的库存";
      this.inventoryList()
    }
  }
</script>

<style lang="less" scoped>
  .team-box {
    /*position: absolute;*/
    /*top: 50px;*/
    /*left: 0;*/
    width: 100%;
    min-height: 100%;
    background: #f3f3f3;
    font-size: 1rem;
    margin-top: 50px;
    margin-bottom: 45px;
    /*搜索*/
    .search-body {
      position: fixed;
      top: 0px;
      left: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #D44242;
      padding-top: 10px;
      .location, .input-box, .filter-box {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        color: #fff;
        vertical-align: top;
      }
      .input-box {
        width: 85%;
        line-height: 26px;
        padding: 0 4px;
        border-radius: 4px;
        background-color: #fff;
        margin-left: 7px;
        text-align: center;
        img {
          width: 5%;
          vertical-align: sub;
        }
        input {
          width: 76%;
          height: 30px;
          border: none;
          outline: none;
          vertical-align: top;
        }
      }
      .title_div {
        width: 10%;
        /*height: 30px;*/
        display: inline-block;
        text-align: center;
        img {
          width: 24px;
          height: 28px;
          vertical-align: top;
        }
      }
    }
    .content {
      width: 100%;
      .vip-list {
        width: 100%;
        background: #FFF;
        margin-bottom: 10px;
        padding-bottom: 10px;
      }
      .fl-flex {
        width: 100%;
        padding: 3% 2.5% 2%;
        background: #fff;
        display: flex;
        .fl-left {
          img {
            width: 90px;
            height: 90px;
          }
        }
        .fl-right {
          margin-left: 10px;
          overflow: hidden;
          p {
            height: 1.3rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          .discribe {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 0.8rem;
            color: #aaa;
            margin-bottom: 5px;
            margin-top: 3px;
          }
          .summary {
            /*height: 30px;*/
            font-size: 0.8rem;
            .gender {
              color: #FB3F40;
            }
          }
        }
      }
    }
    .jh {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #FFF;
      height: 50px;
      margin-top: 10px;
      .rep {
        padding: 5px 20px;
        background: #d44242;
        color: #FFF;
        border-radius: 15px;
        font-size: 0.8rem;
        width: 30%;
        text-align: center;
        margin: 10px auto;
        img {
          width: 15px;
          height: 15px;
          vertical-align: top;
        }
      }
    }
  }
</style>
